<template>
  <a-card class="tree">
    <div class="tree_btn">
      <span>接口管理</span>
      <a-button shape="circle"><add-img class="addImg" @click="slotAddSub" /></a-button>
    </div>
    <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入" />

    <a-spin :spinning="loading">
      <a-tree
        ref="tree1"
        :expanded-keys="expandedKeys"
        :loading="loading"
        selectable
        :tree-data="dataTree"
        :field-names="fieldNames"
        :auto-expand-parent="autoExpandParent"
        show-line
        block-node
        @expand="onExpand"
        @select="handleSelect"
      >
        <template #title="nodeData">
          <!-- 搜索 -->
          <span v-if="nodeData.directoryName.indexOf(searchValue) > -1">
            {{ nodeData.directoryName.substr(0, nodeData.directoryName.indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{ nodeData.directoryName.substr(nodeData.directoryName.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ nodeData.directoryName }}</span>
          <!-- 操作 -->
          <a-popover trigger="hover">
            <template #content>
              <a-button size="small" title="添加下级" @click="slotAddSub(nodeData)">添加</a-button>
              <a-button size="small" title="修改" @click="slotPutSub(nodeData)">修改</a-button>
              <a-button size="small" title="删除" @click="slotDelSub(nodeData)">删除</a-button>
            </template>
            <a-button size="small" class="tree_btn">┋</a-button>
          </a-popover>
        </template>
      </a-tree>
    </a-spin>
  </a-card>

  <!-- 目录名称弹窗 -->
  <a-modal v-model:visible="isDirectory" destroy-on-close cancel-text="取消" ok-text="确定" title="新增一级目录" @ok="AddTreeRoot">
    <div>
      <span><i>*</i>目录名称</span> <a-input v-model:value="NodeName" placeholder="请输入" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import AddImg from '@/components/icon/addImg.vue';
  import { getInterfaceManagementHook } from '@/hooks/InterfaceManagementHooks/getInterfaceManagementHooks';
  import { TreeHooks } from '@/hooks/TreeStructure/TreeStructureHooks';
  import { useRoute } from 'vue-router';
  // 控制目录名称弹窗显示
  const isDirectory = ref<boolean>(false);

  // 引入hooks
  const { tableData, getList } = getInterfaceManagementHook();
  const { flattenList, loading, dataTree, data, addTreeStructure, getTreeStructure, updataTreeStructure, delTreeStructure } = TreeHooks();
  // 目录节点名称
  const NodeName = ref<string>('');
  // 用户输入的搜索值
  const searchValue = ref<string>('');
  // 是否自动展开父节点
  const autoExpandParent = ref<boolean>(true);
  //获取路由传递的菜单编号
  const route = useRoute();
  // 替换 treeNode 中 title,key,children 字段为 dataTree 中对应的字段
  const fieldNames = {
    children: 'children',
    title: 'directoryName',
    key: 'directoryCode',
  };
  // 菜单编号
  data.menuCode = route.query.menuCode as string;
  // 展开节点
  const expandedKeys = ref<string[]>([]);
  // 页面加载获取树结构
  onMounted(async () => {
    getTreeStructure();
  });

  // 选中树节点
  const handleSelect = (selectedKeys: string, e: any) => {
    tableData.directoryCode = selectedKeys[0];
    getList();
  };
  // 点击展开
  const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };
  // 监听搜索值变化
  watch(searchValue, nv => {
    console.log(flattenList);
    const suitedList: string[] = [];
    flattenList.forEach(e => {
      console.log(e.directoryName);
      if (nv && e.directoryName.indexOf(nv) !== -1) {
        console.log(`${e.directoryName}---${e.directoryCode}`);
        suitedList.push(e.directoryCode);
      }
    });
    expandedKeys.value = suitedList;
  });
  // 修改节点名称
  const slotPutSub = (e: any) => {
    isDirectory.value = true;
    NodeName.value = e.directoryName;
    data.status = '1';
    data.directoryCode = e.directoryCode;
    data.parentCode = data.menuCode;
  };
  // 增加下级节点
  const slotAddSub = (e: any) => {
    isDirectory.value = true;
    // 判断是增加根节点还是子节点
    if (e.directoryCode == undefined) {
      data.parentCode = data.menuCode;
    } else {
      data.parentCode = e.directoryCode;
    }
    data.status = '0';
  };
  // 删除节点
  const slotDelSub = async (e: any) => {
    data.directoryCode = e.directoryCode;
    await delTreeStructure();
    getTreeStructure();
  };
  // 弹窗确定操作
  const AddTreeRoot = async () => {
    console.log(`${NodeName.value}--菜单编号:${data.menuCode}`);
    data.directoryName = NodeName.value;
    if (data.status == '0') {
      console.log('新增');
      await addTreeStructure();
    } else if (data.status == '1') {
      console.log('修改');
      await updataTreeStructure();
    }
    getTreeStructure();
    NodeName.value = '';
    isDirectory.value = false;
  };
</script>

<style lang="less" scoped>
  .ant-card {
    overflow: hidden;
    overflow-y: auto;
    // box-shadow: 0px 0px 20px 2px #b4b1b2;
    width: 20%;
    height: 100%;

    :deep .ant-card-body {
      padding: 10px 5px;
    }

    .tree_btn {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      align-content: center;

      span {
        font-size: 20px;
        font-weight: 600;
      }
    }

    .ant-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0;
      font-size: 10px;
      font-weight: 500;
    }
  }
  // 旋转动画

  .tree {
    @keyframes rotate {
      to {
        transform: rotate(1turn);
      }
    }
    //目录边框特效
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none;
    border-radius: 6px;
    color: rgb(11, 12, 12);
    background: rgb(253, 253, 253);
    outline: none;

    .ant-input-group-wrapper::before {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -2;
      width: 300%;
      height: 300%;
      background: #1ec3ec;
      content: '';
      transform-origin: 0 0;
      animation: rotate 4s infinite linear;
      // background: linear-gradient(235deg, #89ff00, #060c21, #b700ff);
      // animation: transparency 4s infinite;
      // -webkit-animation: transparency 4s infinite;
    }

    .ant-input-group-wrapper::after {
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: -1;
      border-radius: 6px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      background: rgb(255, 255, 255);
      content: '';
      transform-origin: 0 0;
      // background: linear-gradient(235deg, #2ff3e9, #b62caf, #da4e17);
      // animation: transparency 4s infinite;
      // -webkit-animation: transparency 4s infinite;
      // animation: rotate 3s infinite linear;
    }
    // @keyframes transparency {
    //   0% {
    //     opacity: 0.9;
    //   }
    //   10% {
    //     opacity: 0.7;
    //   }
    //   20% {
    //     opacity: 0.5;
    //   }
    //   30% {
    //     opacity: 0.3;
    //   }
    //   40% {
    //     opacity: 0.5;
    //   }
    //   50% {
    //     opacity: 0.4;
    //   }
    //   60% {
    //     opacity: 0.6;
    //   }
    //   70% {
    //     opacity: 0.9;
    //   }
    //   85% {
    //     opacity: 0.4;
    //   }
    //   90% {
    //     opacity: 0.6;
    //   }
    //   100% {
    //     opacity: 1;
    //   }
    // }

    // @-webkit-keyframes transparency {
    //   0% {
    //     opacity: 0.9;
    //   }
    //   10% {
    //     opacity: 0.7;
    //   }
    //   20% {
    //     opacity: 0.5;
    //   }
    //   30% {
    //     opacity: 0.3;
    //   }
    //   40% {
    //     opacity: 0.5;
    //   }
    //   50% {
    //     opacity: 0.4;
    //   }
    //   60% {
    //     opacity: 0.6;
    //   }
    //   70% {
    //     opacity: 0.9;
    //   }
    //   85% {
    //     opacity: 0.4;
    //   }
    //   90% {
    //     opacity: 0.6;
    //   }
    //   100% {
    //     opacity: 1;
    //   }
    // }
  }

  .ant-modal-content {
    div {
      display: flex;
    }

    .ant-modal-body {
      span {
        width: 20%;

        i {
          font-size: 16px;
          font-weight: 600;
          color: red;
        }
      }
    }
  }

  :deep(.ant-tree-title) {
    display: flex;
    justify-content: space-between;

    .tree_btn {
      margin-bottom: 0;
      border: 0;
      background: rgba(0, 0, 0, 0);
    }
  }

  // 关闭时的图标
  :deep(.ant-tree-switcher_close) {
    // background: url('../../assets/images/open.png') no-repeat 4px 10px !important;
    i {
      display: none !important;
    }
  }
  // 把之前的默认图标隐藏
  :deep(.ant-tree-switcher-noop) {
    width: 0 !important;

    i {
      display: none !important;
    }
  }
  // 自定义配置padding距离
  :deep(.ant-tree-node-content-wrapper-normal) {
    padding-left: 15px !important;
  }
  // 打开sholine="true"时让子项的line线隐藏
  :deep(.ant-tree.ant-tree-show-line .ant-tree-child-tree li:not(:last-child)::before) {
    border-left: none !important;
  }
  // 调整改变line线位置并把实线改为虚线
  :deep(.ant-tree.ant-tree-show-line li:not(:last-child)::before) {
    top: 10px;
    left: 11px;
    border-left: 1px dashed #d9d9d9;
  }
  //打开图标的更换
  :deep(.ant-tree-switcher_open) {
    // background: url('~@/assets/minus.svg') no-repeat 4px 10px !important;
    i {
      display: none !important;
    }
  }
</style>
